/*！【07】[退出全屏时]控制面板
 * -------------------------------------------------------
 * 7-1 （7-1-top）（绝对定位）[退出全屏时]控制面板-顶部-Top部分 
 * -------------------------------------------------------
 * 7-2（7-2-bottom）（绝对定位）[退出全屏时]控制面板-底部-Bottom部分 
 * -------------------------------------------------------------
 */

// 7-1 通用样式 和 extFullControl 同级
.extFullControl-Top{}
// 7-2 通用样式 和 extFullControl 同级
.extFullControl-Bottom{}

// 【07】[退出全屏时]控制面板
.extFullControl{
	@include position(absolute);
	@extend .u-flex-column;
	@extend .u-flex-juc-sp-between;//上下对齐
	
	// 7-1 （7-1-top）（绝对定位）[退出全屏时]控制面板-顶部-Top部分
	&__ext-top-box{
		@extend .u-flex-row;
		@extend .u-flex-nowrap;
		@extend .u-flex-juc-sp-between;//左右对齐
		@extend .u-flex-al-items-center;
		
		// 渐变背景(从上到下)
		background-image:linear-gradient(to bottom,rgba(0,0,0,0.45),rgba(0,0,0,0));
		
		&__e-t-left-box{
			flex: 1;
		}
		
		&__e-t-right-box{
			@extend .u-flex-juc-center;
			@extend .u-flex-al-items-center;
			
			&__public-VideoIcons-box{
				@extend .u-flex-row;
				@extend .u-flex-nowrap;
				&__item{
					@extend .u-flex-juc-center;
					@extend .u-flex-al-items-center;
					
					width: 90rpx!important;
					height: 90rpx!important;
					//background-color: #DD524D;
					// 仿爱奇艺时 用到的
					&__Image-icons{
						
						//width: 76rpx;//"鸿蒙OS"系统上用rpx有问题，px可修复此问题
						//height: 76rpx;//"鸿蒙OS"系统上用rpx有问题，px可修复此问题
						width: 76rpx;
						height: 76rpx;
					}
				}
			}
		}
	}
	
	// 7-2（7-2-bottom）（绝对定位）[退出全屏时]控制面板-底部-Bottom部分 
	
	&__ext-Bottom-box {
		@extend .u-flex-row;
		@extend .u-flex-nowrap;
		@extend .u-flex-juc-sp-between;//左右对齐
		@extend .u-flex-al-items-center;
		
		// 渐变背景(从下到上)
		background-image:linear-gradient(to top,rgba(0,0,0,0.45),rgba(0,0,0,0));
		
		// 左边图标按钮（播放、暂停）
		&__e-b-left-box{
			&__public-VideoIcons-box{
				@extend .u-flex-row;
				@extend .u-flex-nowrap;
				&__item{
					@extend .u-flex-juc-center;
					@extend .u-flex-al-items-center;
					width: 90rpx!important;
					height: 90rpx!important;
					&__Image-icons{
						//width: 76rpx;//"鸿蒙OS"系统上用rpx有问题，px可修复此问题
						//height: 76rpx;//"鸿蒙OS"系统上用rpx有问题，px可修复此问题
						width: 76rpx;
						height: 76rpx;
					}
				}
			}
		}
		
		// 中间视频进度条整体盒子
		&__e-b-conter-box{
			// 进度条盒子
			@extend .u-flex-row;
			@extend .u-flex-nowrap;
			@extend .u-flex-juc-sp-around;//左右对齐
			@extend .u-flex-al-items-center;
			
			&__e-b-c-left-box{
				// 左边当前进度条时间
				@include p-right(10rpx);//右边内边距5px
				align-items: flex-start;
				//background-color:#1df;
				
				// 左边 - 当前时长
				&__text-curritme{
					font-size: 24rpx;
					font-weight: 700;
				}
			}
			
			&__e-b-c-conter-box{
				// 中间 - 视频进度条
				
				@extend .u-flex-al-items-center;
				@extend .u-flex-juc-center;
				
				flex: 1;
				height: 80rpx;
				//background-color: #1dc;
				
				// 进度条组件
			}
			
			
			&__e-b-c-right-box{
				// 右边总进度条时间
				
				@include p-left(10rpx);//左边内边距5px
				align-items: flex-end;
				//background-color:#1df!important;
				
				// 右边 - 总时长
				&__text-druationTime{
					@extend .extFullControl__ext-Bottom-box__e-b-conter-box__e-b-c-left-box__text-curritme;
				}
			}
		}
		
		// 右边图标按钮（小窗、进入全屏）
		&__e-b-right-box{
			&__public-VideoIcons-box{
				@extend .extFullControl__ext-Bottom-box__e-b-left-box__public-VideoIcons-box;
				&__item{
					@extend .extFullControl__ext-Bottom-box__e-b-left-box__public-VideoIcons-box__item;
					
					&__Image-icons{
						@extend .extFullControl__ext-Bottom-box__e-b-left-box__public-VideoIcons-box__item__Image-icons;
					}
				}
			}
		}
	}
	
}
